<template>
  <el-form :inline="true"
           class="zfile-header"
           size="mini">
    <el-form-item>
      <el-breadcrumb separator="/"
                     separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{path: '/' + driveId + '/main'}">{{this.$store.state.common.config.siteName ? this.$store.state.common.config.siteName : '首页'}}</el-breadcrumb-item>
        <el-breadcrumb-item v-for="item in breadcrumbData"
                            class="hidden-xs-only"
                            :to="{path: '/' + driveId + '/main' + item.fullPath}"
                            :key="item.path">{{item.name}}</el-breadcrumb-item>
      </el-breadcrumb>
    </el-form-item>
    <div class="zfile-header-drive box animate__animated animate__fadeIn">

      <el-form-item v-show="this.$store.getters.debugMode"
                    label="已开启 DEBUG 模式，使用完请及时关闭"
                    class="zfile-debug-tips"
                    size="small">
        <el-button @click="resetAdminPwd"
                   size="small"
                   type="danger">重置密码</el-button>
      </el-form-item>

      <el-form-item label="图片模式"
                    size="small">
        <el-switch v-model="imgModel"></el-switch>
      </el-form-item>
    </div>
  </el-form>
</template>

<script>
import path from 'path';

export default {
    name: 'Header',
    props: ['driveId'],
    data() {
        return {
            imgModel: false,
            driveList: [],
            currentDriveId: '',
            search: '',
            breadcrumbData: [],
            searching: false
        };
    },
    created() {
        this.buildBreadcrumbData();
    },
    methods: {
        resetAdminPwd() {
            this.$confirm('是否确认重置后台管理员密码？重置后用户名/密码将强制修改为 admin 123456', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                callback: action => {
                    if (action === 'confirm') {
                        this.$http.get('/debug/resetPwd').then(response => {
                            if (response.data.code === 200) {
                                this.$message.success('重置成功，请及时关闭 debug 功能，防止出现安全问题！');
                            } else {
                                this.$message.error(response.data.msg);
                            }
                        });
                    }
                }
            });
        },
        buildBreadcrumbData() {
            this.breadcrumbData = [];
            let fullPath = this.$route.params.pathMatch;
            fullPath = fullPath ? fullPath : '/';

            while (fullPath !== '/') {
                let name = path.basename(fullPath);
                this.breadcrumbData.unshift({ name, fullPath });
                fullPath = path.resolve(fullPath, '../');
            }
        },
        refreshCurrentStorageStrategy() {
            this.driveList.some(item => {
                if (item.id === this.currentDriveId) {
                    this.$store.commit('updateCurrentStorageStrategy', item);
                }
            });
        }
    },
    watch: {
        currentDriveId: function(newVal, oldVal) {
            this.$store.commit('updateOldDriveId', oldVal);
            this.refreshCurrentStorageStrategy();
            if (oldVal !== '') {
                this.$router.push('/' + newVal + '/main');
            }
        },
        '$store.getters.newImgMode': function(newVal) {
            this.imgModel = newVal;
        },
        imgModel: function() {
            this.$store.commit('switchImgMode', this.imgModel);
        },
        '$route.fullPath': function() {
            // 当 URL 变化, 则自动重新 build 面包屑
            this.buildBreadcrumbData();
        },
        search: function(newVal) {
            clearTimeout(this.timer);
            this.timer = setTimeout(() => {
                this.$store.commit('updateSearchParam', newVal);
            }, 150);
        }
    },
    async mounted() {
        // await this.$http.get('file/drive/list').then(response => {
        //     // if (!response.data.data.isInstall) {
        //     //     this.$router.push('/install');
        //     // 	return;
        //     // }
        //     // this.$router.push('/main');
        //     // this.driveList = response.data.data.driveList;
        //     // // 如果当前 URL 参数中有驱动器 ID, 则直接用当前的.
        //     // if (this.driveId) {
        //     //     this.currentDriveId = Number(this.driveId);
        //     // } else if (this.driveList.length > 0) {
        //     //     // 否则读取驱动器列表中的第一个, 并跳转到响应的 URL 中.
        //     //     this.currentDriveId = this.driveList[0].id;
        //     //     this.$router.push('/' + this.driveList[0].id + '/main');
        //     // } else if (this.driveList.length === 0) {
        //     //     this.$confirm('当前无可用驱动器，是否跳转至管理员页面添加驱动器？', '提示', {
        //     //         confirmButtonText: '确定',
        //     //         cancelButtonText: '取消',
        //     //         type: 'info',
        //     //         callback: action => {
        //     //             if (action === 'confirm') {
        //     //                 this.$router.push('/login');
        //     //             }
        //     //         }
        //     //     });
        //     // }
        //     // this.refreshCurrentStorageStrategy();
        // });
    }
};
</script>

<style scoped>
.zfile-header {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    height: 48px;
    line-height: 48px !important;
    background: #fafafa;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding-left: 30px;
}

.zfile-header .el-breadcrumb {
    line-height: 48px;
    font-size: 13px;
}

.zfile-header .el-input {
    line-height: 48px;
}

@media only screen and (max-width: 767px) {
    .zfile-header >>> .el-breadcrumb__separator {
        display: none !important;
    }
    .zfile-header >>> .el-form-item__label {
        display: none !important;
    }
    .zfile-header >>> .el-select {
        width: 120px;
    }
}

.zfile-header-drive {
    margin-right: 20px;
}

.zfile-header-drive >>> .el-form-item__content {
    vertical-align: unset;
}

.zfile-debug-tips >>> .el-form-item__label {
    font-weight: bold;
    color: red !important;
}
</style>
